ЯК СТВОРИТИ ПРОГРАМУ, ЩО КРЕСЛИТЬ ВІЗЕРУНКИ?

ЧИ ГЕОЛОКАЦІЯ ТАК САМО ВИЗНАЧАЄ МОЇ КООРДИНАТИ, ЯК Я ВИЗНАЧАЮ ЇХ НА СЦЕНІ?

ЯК СТВОРИТИ СВІЙ ПЕРШИЙ ГРАФІЧНИЙ РЕДАКТОР?

ПРИГАДУЄМО

Що таке комп’ютерна графіка? Що таке піксель? Що таке розмір растрового зображення? У яких програмах ви раніше створювали чи опрацьовували графічні зображення?

ГРАФІКА У СКРЕТЧ

Комп’ютерну графіку створюють не тільки у графічних редакторах. Комп’ютерна графіка широко використовується і для візуалізації різних процесів та подій, наприклад для відстеження польоту літаків у режимі реального часу, і є частиною програмного коду.

У середовищі Скретч за допомогою розширення Олівець можна створювати різноманітні візерунки програмним методом, тобто писати код (скрипт, програму). Виконавцем команд із цієї групи може бути Кіт або будь-який інший спрайт.

Розміри створюваного зображення у середовищі Скретч обмежені розмірами сцени. Для створення зображення є всього 480 точок у ширину і 360 точок у висоту. Точки в середовищі Скретч значно більші за 1 пік-сель екрана у растровому зображенні.

Якщо обирати різні режими сцени, то кількість точок для побудови зображення залишається сталою (480 х 360). Ці точки називають координатами сцени.

КОРИСНОСТІ

Слід зменшити розмір

спрайта, який креслить, перед тим, як створювати програму.

КОРИСНОСТІ

Оскільки невдалих спроб у програміста-художника може бути багато, то спочатку створюємо скрипт (Гумку), який запускатиме будь-яка зручна клавіша клавіатури.

ЗАГАЛЬНЕ ПРАВИЛО СТВОРЕННЯ ГРАФІЧНИХ ЗОБРАЖЕНЬ

1

Очистити

сцену

2

Вказати початкові налаштування олівця та початкове розміщення спрайта

3

4

Додати команди переміщення спрайта по сцені, щоб отримати зображення

ПОНЯТТЯ КООРДИНАТНОЇ ПЛОЩИНИ

Точки на сцені можна уявляти як місце перетину ліній сітки.

Щоб вказати місце розташування об’єкта на сцені, треба вказати два числа, що відповідають вертикальній і горизонтальній лініям, на перетині яких знаходиться обєкт.

Число, яке позначає горизонтальну лінію, це координата х. Праворуч від нуля значення x збільшується від 1 до 240. Ліворуч від нуля значення x зменшується від -1 до -240.

Усі об’єкти, розташовані на спільній вертикальній лінії, мають однакову координату х. Наприклад,

у об’єктів

та

координата х = -2.

Число, яке позначає вертикальну лінію, це координата у. Вище від нуля значення у збільшується від 1

до 180, а нижче від нуля зменшується від -1 до -180. У об’єктів

та

координата у = 2.

Центр сцени має координату х = 0, у = 0. Координати прийнято записувати так: (0, 0); (-240, 10); (100, -150), де перше число — це координата х, а друге — у.

x та у

Фон сцени з клітинками розміром 20 х 20

КОМАНДИ ОЛІВЦЯ ДЛЯ КРЕСЛЕННЯ ЛІНІЙ

Щоб отримати накреслену лінію, використовуємо ті самі команди, що і для руху спрайта по сцені. Тільки враховуємо, що для креслення олівець має бути опущений.

переміщення у центр сцени

ковзання (повільне переміщення у точку x = 12, у = -66)

ВИПАДКОВІ ЧИСЛА. ВИПАДКОВІ КООРДИНАТИ

Координатами точок для переміщення можуть бути також випадкові числа, згенеровані оператором випадкових чисел.

Модель задачі, створена 3Р-ручкою

Результат роботи програми

НАВЧАЄМОСЯ ЧЕРЕЗ ДІЯЛЬНІСТЬ

ОБГОВОРЮЄМО

Пригадайте усі ситуації з життя, у яких використовується схожа нумерація об’єктів (по вертикалі та по горизонталі). Поділіться досвідом, як вам вдавалося орієнтуватися в таких координатах.

Як працює геолокація у GPS-навігаторах?

Перегляньте програму відстеження польоту літаків

https://flightaware.com/live/

МІРКУЄМО ТА АРГУМЕНТУЄМО

1. Визначте координати x та у всіх об’єктів на малюнку (с. 150).

2. Обчисліть, на скільки треба збільшити координату x об’єкта Бджілка, щоб вона перемістилася до об’єкта Пташка?

3. На скільки треба зменшити координату у об’єкта Метелик, щоб він перемістився поруч із Жуком (щоб вони мали однакову координату у).

ВИКОНУЄМО

1. Запишіть у зошиті всі координати корабля на малюнку (с. 150), починаючи від центра сцени та рухаючись вліво. Врахуйте, що лінії сітки проведені через кожні 20 точок.

( - , - ) ( - , - ) ( - , - )..............

2. Позначте точки на аркуші-шаблоні та створіть модель задачі за допомогою 3Б-ручки.

3. Створіть самостійно програму для креслення такого корабля.

Можете створити власний малюнок на шаблоні і програму для його креслення (див. зображення).

ДОСЛІДЖУЄМО

1. Створіть скрипт, як на зображенні (с. 151).

2. Поясніть, чому сторона квадрата містить 200 точок сцени.

3. Скільки разів вам необхідно було натиснути кнопку Прапорець, щоб стало зрозуміло, що лінії, які креслить Кіт, точно не виходять за межі квадрата?

4. Скільки разів необхідно натиснути Прапорець, щоб замалювати всю площу квадрата? Запропонуйте, як спростити цей процес дослідження.

5. Які координати вершин цього квадрата?

ПРОЄКТ «СТВОРЮЄМО ОРНАМЕНТИ ТА ВІЗЕРУНКИ»

25 хв

ПІД ЧАС ПРОЄКТУ ВИ:

створите модель задачі за допомогою 3D-py4K^ дослідите вишиванки вашого регіону; створите власний графічний редактор.

ПРИГАДУЄМО

Як створювати нові образи об’єктів?

Що таке події?

Які події середовища Скретч використовують для керування об’єктом?

НОВІ ЗНАННЯ ТА МОЖЛИВОСТІ

МІРКУЄМО ТА АРГУМЕНТУЄМО

Створіть плоску модель для штампа за допомогою 3D-ручки на гладенькій поверхні. Коли модель застигне, вмочуйте її у кольорову фарбу (наприклад, гуаш) і створюйте візерунки на папері. Поясність, як, на вашу думку, працює команда Штамп у середовищі Скретч.

ДОСЛІДЖУЄМО

Знайдіть в інтернеті відомості про вишиванки вашого регіону, ознайомтеся з їхніми характерними орнаментами та кольорами.

ГОТУЄМОСЯ ДО ПРОЄКТУ

Ідея і сценарій програми

Створіть програму, у якій можна малювати зображення (орнаменти та візерунки) подібно до того, як ви робили це з 3D-ручкою.

Завдання

1. Ознайомтеся з критеріями оцінювання проєкту.

2. Оберіть один із орнаментів, які створюватимете, або вигадайте свій. Доберіть кольори, які використовують у вашому регіоні для створення вишиванок чи мережива. Наприклад, у колірній гамі традиційно української, гуцульської чи новітньої вишивки або мережива.

3. Обміркуйте питання дизайну програми. Якими клавішами буде зручно:

змінювати колір об’єкта? переміщувати об’єкт по сцені? ставити штамп?

ВИКОНУЄМО

1. Додайте об’єкт, який буде найменшим елементом вашого орнаменту, видаліть спрайт Кота.

2. До обраного об’єкта створіть образи.

3. Додайте на сцену фон з клітинками по 30 точок. Доберіть розмір вашого об’єкта до розміру клітинки.

4. Підготуйте скрипт для очищення сцени та повернення об’єкта у початкове положення.

5. Створіть скрипт зміни образу об’єкта.

6. Створіть скрипт створення штампа.

7. Створіть спрайти для навігації (переміщення) об’єкта по сцені. Визначте, на яку кількість кроків треба переміщувати об’єкт, щоб він потрапляв точно на перетин ліній сітки.

8. Для всіх скриптів самостійно оберіть зручні кнопки для керування Спрайтом і створення візерунка.

9. Якщо програма готова - натхнення у творчості!

ПЕРЕВІРТЕ СЕБЕ	Так	Частково	Ні
ЗМІСТ
Візерунок симетричний.	□	□	□
Я ретельно добирав / добирала кольори образів.	□	□	□
САМОСТІЙНІСТЬ ТА АКАДЕМІЧНА ДОБРОЧЕСНІСТЬ
Я самостійно виконував / виконувала усі завдання.	□	□	□
Я самостійно встановив / встановила усі параметри у командах.	□	□	□
Я самостійно обрав / обрала зручні клавіші керування.	□	□	□
ВЛАСНЕ СТАВЛЕННЯ
Мені сподобалося створювати візерунки за допомогою спрайта... (якого?), тому що...	□	□	□

 

Це матеріал з підручника "Інформатика" 5 клас Козак 2022